import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

let renderer, camera, scene
let axesHelper
let controls





initRenderer()
initCamera()
initScene()
initAxesHelper()
initControls()
animate()


window.addEventListener('resize', function () {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
})


function initRenderer() {
    renderer = new THREE.WebGLRenderer()
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)
}

function initCamera() {
    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000)
    camera.position.set(4,4,4)
}

function initScene(params) {
    scene = new THREE.Scene()
    scene.background = new THREE.Color(0x888888)
}

function initAxesHelper(params) {
    axesHelper = new THREE.AxesHelper(3)
    scene.add(axesHelper)
}

function  initControls(params) {
    controls = new OrbitControls(camera, renderer.domElement)
}

function animate(params) {
    requestAnimationFrame(animate)

    renderer.render(scene,camera)
}

